<template>
  <div class="projects-item">
    <div class="image-bg">
      <img :src="ItemData.img_url" alt="" class="background-image">
      <span _ngcontent-rsc-c216="" class="project-type">{{ ItemData.category }}</span>
    </div>
    <div class="box">
      <div class="title">
        <span>{{ ItemData.name }}</span>
      </div>
      <div class="content" :title="ItemData.description">
        {{ ItemData.description }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, watch, ref } from 'vue';

// 定义组件接收的props
const props = defineProps({
  projectData: {
    type: Object,
    required: true
  }
});

let ItemData = ref({})
ItemData = props.projectData ? props.projectData : { id: 1, name: "DevOps全流程示例项目", description: "华为端到端（HE2E）DevOps实施框架，是结合了华为30年研发经验并集合了业界先进的实践所形成的一套可操作可落地的敏捷开发方法论。", img_url: require("@/assets/img/template-project-item1.png"), category: "科研项目类" }
</script>

<style lang="scss" scoped>
.projects-item {
  position: relative;
  margin: 10px 0;
  width: 317px;
  height: 308px;
  /* 边框仅用于可视化组件边界，可根据需要移除 */
  border-radius: 10px;
  background-color: #ffffff;
  /* 背景颜色，可根据需要调整 */
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);

  .image-bg {
    width: 100%;
    /* 上半部分高度 */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;


    .background-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      /* 保持图片比例，同时适应容器 */
    }

    .project-type {
      position: absolute;
      top: 21px;
      left: 20px;
      padding: 0 8px;
      background-image: linear-gradient(90deg, #3023ae 0%, #53a0fd 48%, #8b46cb 100%);
      font-size: 12px;
      color: #fff;
      line-height: 22px;
      border-radius: 8px 0;
    }
  }

  .box {
    width: 100%;
    height: 50%;
    /* 下半部分高度 */
    padding: 10px;
    box-sizing: border-box;
    background-image: url('@/assets/img/static-content-bg.png');
    background-size: cover; // 背景图片完全填充背景
    background-position: center; // 可选，确保背景图片居中显示
    background-repeat: no-repeat; // 确保背景图片不重复

    /* 确保padding不会影响容器的高度 */

    .title {
      font-size: 16px;
      font-weight: 700;
      color: #000;
      cursor: pointer;
    }

    .content {
      display: -webkit-box;
      margin: 8px 0 0;
      line-height: 20px;
      font-size: 12px;
      color: #71757f;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      cursor: pointer;
    }
  }
}
</style>
